<extend name="Common:base"/>
<block name="head">
  <style>
    .el-tabs__header{
      border-top:2px solid #ea4b4b;
      border-bottom: 1px solid #c51f1f;
    }
    .el-dialog .el-tabs__header{
      border-top:none;
    }
    .el-tabs--border-card .el-tabs__item{
      border-left: none;
    }
    .el-tabs--border-card .el-tabs__item.is-active {
      background-color: #fff;
      border-right-color: #d3dce6;
      background: #544b8f;
      color: #fff;
    }
    .el-tabs--border-card .el-tabs__header {
      background-color: #fff;
      margin: 0;
    }
    .container > .wrapp > .a > .el-row {
      margin-bottom: 6px;
    }
    .el-tabs--border-card .el-tabs__content{
      padding:0 9px 5px 9px;
    }
    .el-card, .el-menu--horizontal .el-submenu>.el-menu, .el-tabs--border-card{
      box-shadow: none;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-table__body tr.current-row>td{
      background: rgba(157, 195, 232, 0.7);
    }
    .el-tabs__item{
    	font-family: Microsoft YaHei;
    	color:#0d0f10;
    	font-size: 14px;
    }
  </style>
</block>
<block name="body">
<div id="app" class="container">
	<div class="wrapp" id="app1" v-show="show" style="display:none;">
		<div class="a" id="app2">
			<el-row>
			  <el-col :span="24">
          <el-form :inline="true" ref="searchForm" :model="searchForm">
		  		  <el-form-item prop="name" style="width:170px">
		  		    <el-input v-model="searchForm.name" size="small" placeholder="客户姓名"></el-input>
		  		  </el-form-item>
		  		  <el-form-item prop="contact" style="width:170px">
		  		    <el-input v-model="searchForm.contact" size="small" placeholder="手机|qq|微信号"></el-input>
		  		  </el-form-item>

		        <el-form-item prop="field" v-show="false">
		          <input type="hidden" size="small" v-model="searchForm.field">
		        </el-form-item>

		        <el-form-item>
		          <el-button type="info" size="small" icon="search" @click="loadDatalist">查询</el-button> 
		          
		          <el-tooltip content="清空搜索框并刷新表格数据" placement="bottom-start" style="margin-left:10px;">
		            <el-button  size="small" @click="searchReset">重置</el-button>
		          </el-tooltip>

		          <el-tooltip content="已经审核通过的客户" placement="bottom-start" style="margin-left:10px;">
		            <!-- <el-badge :value="{$badgeNum.already}" :max="9" >
                </el-badge> -->
                <el-button size="small" type="primary" @click="setField('already')">已审核</el-button>
		          </el-tooltip>

		          <el-tooltip content="等待审核的客户" placement="bottom-start" style="margin-left:15px;">
		            <!-- <el-badge :value="{$badgeNum.yet}" :max="9" >
		            </el-badge> -->
                <el-button type="info" size="small" @click="setField('yet')">待审核</el-button>
		          </el-tooltip>

		          <el-tooltip content="点击刷新当前页面" placement="right"  style="margin-left:15px;">
		            <el-button @click="refresh" size="small" type="danger">刷新</el-button>
		          </el-tooltip>

		  		  </el-form-item>
  		    </el-form>
			  </el-col>
		  </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="dataList" border v-loading="dataLoad" 
              @selection-change="handleSelectionChange"
              @sort-change="sortChange"
              @row-click="trackLog"
              element-loading-text="{:L('DATA_LOGIN')}"
              empty-text="暂无数据,销售妹子正在努力中！"
              highlight-current-row ref="select">

		  	    <el-table-column width="50" align="center" type="selection"></el-table-column>
            
		  	    <el-table-column label="{:L('INDEX')}" type="index" width="65"  ></el-table-column>

		  	    <el-table-column  header-align="center" prop="name" label="客户姓名"></el-table-column>
            
            <!-- sortable='customer' -->
		  	    <el-table-column  header-align="center" prop="type" label="客户类型">
		          <template scope="scope">
		            {{ getType(scope.row.type, 'customerType') }}
		          </template>
		  	    </el-table-column>
            <!-- sortable='customer' -->
		        <el-table-column  header-align="center"  prop="realname" label="跟踪员工">
		        </el-table-column>

	          <el-table-column  header-align="center" prop="qq" label="QQ号">
	            <template scope="scope">
	              {{ scope.row.qq }}
	              <a v-if="scope.row.qq" :href="getTenct(scope.row.qq)">
	                <img width="25"  src="__PUBLIC__/images/0df431adcbef7609bca7d58a2adda3cc7cd99e73_r2_c2.jpg" alt="">
	              </a>
	            </template>
	          </el-table-column>

		        <el-table-column header-align="center" prop="qq_nickname" label="QQ昵称"></el-table-column>

		  	    <el-table-column prop="phone" label="手机" align="center"></el-table-column>

		        <el-table-column  header-align="center" prop="weixin" label="微信号" align="left">
	            <template scope="scope">
	              {{ scope.row.weixin }}
	            </template>
		        </el-table-column>

		        <el-table-column  header-align="center" prop="weixin_nickname" label="微信昵称" align="left">
	            <template scope="scope">
	              {{ scope.row.weixin_nickname }}
	            </template>
		        </el-table-column>

		        <!-- <el-table-column  prop="last_track" sortable='customer' label="最后跟踪时间" align="center" width="175"></el-table-column>

		        <el-table-column  prop="commission" label="跟踪方比例"  header-align="center" width="110"></el-table-column>

		        <el-table-column  prop="plan" label="计划跟踪时间" align="center" width="175"></el-table-column>

		        <el-table-column  prop="conflict" label="最后冲突时间" align="center" width="175"></el-table-column> -->

		        <el-table-column  header-align="center"  label="地区">
		          <template scope="scope">
		            {{ scope.row.province_name+"-"+scope.row.city_name }}
		          </template>
		        </el-table-column>

		        <el-table-column prop="sex"  label="性别" header-align="center">
		          <template scope="scope">
		            {{ getType(scope.row.sex, 'sexType') }}
		          </template>
		        </el-table-column>
          </el-table>
        </el-col>
      </el-row>
		  <!-- toolbar -->
		  <el-row type="type"  justify="space-between" align="middle"  class="row-bg">
		    <el-col :span="12">
		      <div class="grid-content bg-purple">
		      	<span class="wrapper">

			        <!-- <el-tooltip content="选择单个或多个客户分配给指定的回访专员" placement="right">
			          <el-button size="small" type="primary" @click="openDialog('dipacth')">分 配</el-button>
			        </el-tooltip> -->

              <el-tooltip content="选择客户录入跟踪信息" placement="right" >
                <el-button size="small" @click="openDialog('addTrack')" type="primary">录入跟踪</el-button>
              </el-tooltip>
              <el-tooltip content="选择客户录入投诉意见" placement="right">
                <el-button size="small" @click="openDialog('complain')" type="primary" style="margin-left:10px;">客户投诉</el-button>
              </el-tooltip>
              <!-- <el-tooltip content="选择客户审核" placement="right" style="margin-left:10px;">
                <el-button size="small" @click="openDialog('check')" type="primary">审核</el-button>
              </el-tooltip> -->

			      </span>
		      </div>
		    </el-col>
		    <el-col :span="12">
		      <div class="grid-content bg-purple-light pull-right">
		        <!-- page -->
		        <include file="Common:_pagination" />
		        <!-- / page -->
		      </div>
		    </el-col>
		  </el-row>
		</div>

	  <div id="app3" class="b" style="margin:5px -10px 5px;">
	    <el-row>
	     <el-col :span="24">
	        <el-tabs  type="border-card">
	          <el-tab-pane label="跟踪记录">
	            <el-table :data="tableData" empty-text="请点击客户显示跟踪信息" border style="width: 100%" @row-dblclick="viewtraceContents">
	              <el-table-column prop="user" label="操作员工" header-align="center">
	              </el-table-column>

	              <el-table-column prop="type" label="客户类型(当前)" header-align="center">
	              </el-table-column>

	              <el-table-column prop="name" label="客户姓名" header-align="center">
	              </el-table-column>
	              
                <el-table-column label="内容" header-align="center">
                  <template scope="scope">
                    {{scope.row.content | handleString}}
                  </template>
                </el-table-column>

	              <el-table-column prop="created_at" label="跟踪时间" width="180" align="center">
	              </el-table-column>

	              <el-table-column prop="track_text" label="跟踪类型" header-align="center">
	              </el-table-column>

<!--                 <el-table-column prop="step" label="跟踪步骤" header-align="center">
                </el-table-column> -->

	            </el-table>
	          </el-tab-pane>
	          <el-tab-pane label="购买纪录">
	            <el-table :data="tableDataOne" empty-text="请点击客户显示其客户资料" border style="width: 100%">
                <el-table-column label="产品金额" prop="product_money" header-align="center">
                </el-table-column>
                <el-table-column label="产品名称" prop="product_name" header-align="center">
                </el-table-column>
                <el-table-column label="产品周期" prop="product_t" header-align="center">
                </el-table-column>
                <el-table-column label="购买时间" prop="buy_time" header-align="center">
                </el-table-column>
	            </el-table>
	          </el-tab-pane>
            <el-tab-pane label="投诉记录">
              <el-table :data="tableDataTwo"  empty-text="请点击客户显示跟踪信息" border style="width: 100%"  @row-dblclick="viewComplainContents">
                <el-table-column prop="user" label="操作员工" header-align="center">
                </el-table-column>

                <el-table-column prop="type" label="客户类型(当前)" align="center">
                </el-table-column>

                <el-table-column prop="name" label="客户姓名" align="center" >
                </el-table-column>
                
                <el-table-column label="投诉内容" header-align="center">
                  <template scope="scope">
                    {{scope.row.content | handleString}}
                  </template>
                </el-table-column>

                <el-table-column prop="created_at" label="投诉时间" width="180" align="center">
                </el-table-column>

                <el-table-column prop="track_text" label="投诉类型" align="center">
                </el-table-column>
              </el-table>
            </el-tab-pane>
	        </el-tabs>
	     </el-col>
	    </el-row>
	  </div>
	</div>

	<div class="dialogWrapper" v-show="show" style="display: none">
	  <!-- 录入高级查询条件 -->
	  <include file="_advancedQuery" />
	  <!-- /录入高级查询条件 -->
    <!-- 录入跟踪  -->
    <include file="_track" />
    <!-- / 录入跟踪 -->
    <!-- 批量分配 -->
    <include file="_dispacth" />
	  <!-- 跟踪内容 -->
	  <include file="_traceContent" />
    <!-- 投诉内容 -->
    <include file="Customer::_complainContent" />
    <!-- /投诉内容 -->
    <!-- 录入投诉 -->
    <include file="Customer::_complain" />
    <!-- 录入投诉 -->

    <include file="_check" />
	</div>

</div>
</block>
<block name="scripts">
<script>
  page.dipacthFormUrl = "{:U('dispacth')}";
  page.addComplainFormUrl = "{:U('CommonHandleLogic/addComplain')}";
  page.setCheckUrl = "{:U('check')}";
window.defaultOption.setDatas({
  	customerType:{:json_encode($customerType)},
  	sexType:{:json_encode($sexType)},

    products:{:json_encode($Products)},
    
    callBackMan:{:json_encode($callBackMan)},
    logType:{:json_encode($logType)},
    steps:{:json_encode($steps)},
  	multipleSelection:[],
  	provinces:[],
    cities:[],
    cusIdList:[],
    tableDataOne:[{
       'user':'',
       'expense':'',
       'pdt_id':'',
       'identity':'',
       'address':'',
       'time':''
    }],

    tableData:[{
	     'name':'',
	     'created_at':'',
	     'type':'',
	     'track_type':'',
	     'content':'',
	     'user':'',
       'step':''
    }],
    tableDataTwo: [{'name':'',
                 'created_at':'',
                 'type':'',
                 'track_type':'',
                 'content':'',
                 'user':''     
    }],
  }).setForm('search',{
    name:'',
    contact:'',
    field: '',
    group:'user_id',
    ctrl:'search',
  }).setForm('advancedQuery',{
    start:'',
    end:'',
    type:'V',
    group:'user_id',
    ctrl:'advance',
    name:"",
    phone:"",
    track_start:"",
    track_end:"",
  },true).setForm('dipacth',{
    user_id:"",
  }, true).setForm('traceContent',{
    content:'',
  },true).setForm('complainContent',{
    content:'',
  },true).setForm('addTrack',{
    cus_id:"",
    next_datetime:'',
    track_type:'',
    to_type:"",
    content:'',
    name:"",
    step:"",
  },true).setForm('complain',{
    cus_id:'',
    type:'',
    name:'',
    content:'',
  }, true).setForm('check',{
    cus_ids:[],
    state:"1"
  }, true).setMethod('getType', function(type, field){
    return this[field][type];
  }).setMethod('getPdt',function(pdt, field){
    var pdtName;
    this[field].forEach(function(value,index){
      if(value.id == pdt){
        pdtName = value.name;
      }
    });
    return pdtName;
  }).setMethod('beforeList', function(data){
     console.log(this.callBackMan);
     return data;
  }).setMethod('refresh',function(){
  	window.location.reload();
  }).setMethod('setField', function(v){
      this[FormName.getFormName('search')].field = v;
      this[FormName.getFormName('search')].group = 'user_id';
      this.loadDatalist();
  }).setMethod('handleSelectionChange',function(val){
    this.multipleSelection = val;
  }).setMethod('advancedQueryReset',function(){
    // this.$refs.advancedQueryForm.resetFields();
    this.closeDialog('advancedQuery');
  }).setMethod('advanceSearch',function(){

       for (var x  in  this.advancedQueryForm) {
         if (this.advancedQueryForm[x] instanceof  Date) {
          this.advancedQueryForm[x] = this.advancedQueryForm[x].toLocaleDateString();
         }
       }
      this.searchForm = Oassign({},  this.advancedQueryForm);
      this.loadDatalist();
      this.closeDialog('advancedQuery');
  }).setMethod('beforeDipacth',function(){
    var form = 'dipacth';
    var vmThis = this;
    if (this.multipleSelection.length == 0) {
      this.closeDialog(form);
      this.$message.error('请至少选择一个客户');
      return false;
    } else {
      return this.multipleSelection;
    }
  }).setMethod('viewtraceContents',function(row,event){
    this.traceContentFormDialog = true;
    this.traceContentForm.content = row.content;
  }).setMethod('viewComplainContents',function(row,event){
    this.complainContentFormDialog = true;
    this.complainContentForm.content = row.content;
  }).setMethod('sortChange', function(sortObject){
    /*console.log(sortObject);
    console.log(this.searchForm);*/
    var sortMap = {
      ascending: 'asc',
      descending: 'desc'
    }
    if (sortObject.column === null) {
      delete this.searchForm.sort_field;
      delete this.searchForm.sort_order;
    } else {
      this.searchForm.sort_field = sortObject.prop;
      this.searchForm.sort_order = sortMap[sortObject.order];
    }
    this.dataLoad = true;
    this.loadDatalist();    
  }).setVueHook('mounted', function(){
    var vmThis = this;
    //省份、城市
    this.$http.get('{:U("Area/getAreasByPid")}', {params:{pid:1} }).then(function(response){
      var provinces = [];
      response.body.forEach(function(currentValue,index){
        provinces.push({id: currentValue.id, name: currentValue.name});
      })
      vmThis.$set(vmThis, 'provinces', provinces);
    });
    this.dialogLabelWidth = "100px";
  }).setMethod('trackLog',function(row,event,column){
    this.$http.post("{:U('CommonFindDetail/trackInfo')}",row).then(function(response){
      this.tableData = response.body;
    },function(response){
      this.$message.error("查询出错啦");
    });

    this.$http.post("{:U('CommonFindDetail/findDealInfo')}",{user_id:row.cus_id}).then(function(response){
      this.tableDataOne = response.body;
    },function(response){
      this.$message.error("查询出错啦");
    });

    row.condition = 'service';
    this.$http.post("{:U('CommonFindDetail/complainInfo')}",row).then(function(response){
      this.tableDataTwo = response.body;
    },function(response){
      this.$message.error("查询出错啦");
    });
  }).setMethod('dipacthFormSubmit',function(url){
    var  vmThis   = this;
    for (var x in this.multipleSelection) {
          this.cusIdList.push(this.multipleSelection[x].cus_id);
    }
    this.cusIdList.pop();
    this.cusIdList.unshift({user_id:this.dipacthForm.user_id});
    this.dipacthFormSubmitStatus = true;
    this.$http.post(url,this.cusIdList).then(function(response){
      vmThis.$message({message: '操作成功',type: 'success'});
      setTimeout(function(){
        vmThis.dipacthFormDialog = false;
        vmThis.dipacthFormSubmitStatus = false;
        vmThis.$refs.dipacthForm.resetFields(); 
        vmThis.refresh();
      }, 2000);  
    },function(response){
      vmThis.$message.error("操作出错啦");
    });
  }).setMethod('beforeAddTrack',function(){
    var vmThis = this;
    if (this.multipleSelection.length ==0 ||  this.multipleSelection.length>1) {
      this.closeDialog('addTrack');
      this.$message.error('请选择其中一位客户');
      return false;
    } else {
      var  row = this.multipleSelection.pop();
      this[FormName.getForm('addTrack')].name = row.name;
      this[FormName.getForm('addTrack')].cus_id = row.cus_id;
      this[FormName.getForm('addTrack')].to_type = row.type;
      this.row=row;
      return row;
    }
  }).setMethod('complainSubmit',function(url){
    var  vmThis   = this;
    this.complainFormSubmitStatus = true;
    this.$http.post(url,this.complainForm).then(function(response){
      vmThis.$message({message: '操作成功',type: 'success'});
      setTimeout(function(){
        vmThis.complainFormDialog = false;
        vmThis.complainFormSubmitStatus = false;
        vmThis.$refs.complainForm.resetFields(); 
        vmThis.refresh();
      }, 2000);  
    },function(response){
      vmThis.$message.error("操作出错啦");
    });
  }).setMethod('commonSelect',function(x){
    var form = x;
    var vmThis = this;
    if (this.multipleSelection.length ==0 ||  this.multipleSelection.length>1) {
      this.closeDialog(form);
      this.$message.error('请先选择一位客户');
      return false;
    } else {
      var  row = this.multipleSelection.pop();
      this[FormName.getForm(x)].name = row.name;
      this[FormName.getForm(x)].cus_id = row.cus_id;
      this.complainForm.type = row.type;
      this.complainForm.to_id = row.salesman_id;
      this.row=row;
      return row;
    }
  }).setMethod('beforeAddComplain', function(){
    this.commonSelect('complain');
  }).setMethod('beforeCheck', function(){
    if (this.multipleSelection.length == 0) {
      this.$message.error("请至少选择一个客户");
      return;
    }
    for (var i = this.multipleSelection.length - 1; i >= 0; i--) {
      
      this.checkForm.cus_ids.push(this.multipleSelection[i].cus_id);
    }


  });
</script>
</block>
